<template>
  <div class="slideList">
    <div class="titleList">
      <div class="lie1" style="font-size: 20px;">
        <div>助餐服务</div>
        <div>(老年饭桌/老年食堂)</div>
      </div>
      <div class="lie1">上门做家务</div>
      <div class="lie1">日间照料</div>
      <div class="lie1">文化娱乐</div>
      <div class="lie1">聊天解闷</div>
      <div class="lie1" style="font-size: 20px;">
        <div>老年辅具</div>
        <div>用品租赁服务</div>
      </div>
      <div class="lie1">家庭病床</div>
    </div>
    <div class="scroll-container">
      <div class="list">
        <div v-for="(item, index) in list1" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list2" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list3" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list4" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list5" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list6" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item, index) in list7" :key="index" class="listItem">
          <div class="item">
            <div class="title">{{ item.typeTitle }}</div>
            <div class="data">
              <div>{{ item.num }}人</div>
              <div :style="{ color: getColor(index) }">占{{ item.percent }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      colorList: ['#C1C1C1', '#6ACBE5', '#9A7DFA', '#6dcde6', '#10f6de', '#2848de', '#9a7dfa', '#feffff', '#6ACBE5'],
      list1: [ // （1）助餐服务（老年饭桌/老年食堂）
        { typeTitle: '需要服务(合计):', num: 140667, percent: '73.61%' },
        { typeTitle: '附近有(合计):', num: 145560, percent: '27.31%' },
        { typeTitle: '接受过(合计):', num: 26099, percent: '4.90%' },
        { typeTitle: '需要服务(城镇):', num: 46865, percent: '25.31%' },
        { typeTitle: '附近有(城镇):', num: 52419, percent: '28.31%' },
        { typeTitle: '接受过(城镇):', num: 12888, percent: '6.96%' },
        { typeTitle: '需要服务(农村):', num: 93802, percent: '26.96%' },
        { typeTitle: '附近有(农村):', num: 93141, percent: '26.77%' },
        { typeTitle: '接受过(农村):', num: 13211, percent: '3.80%' }
      ],
      list2: [ // （2）上门做家务
        { typeTitle: '需要服务(合计):', num: 96094, percent: '18.03%' },
        { typeTitle: '附近有(合计):', num: 83444, percent: '15.65%' },
        { typeTitle: '接受过(合计):', num: 18754, percent: '3.52%' },
        { typeTitle: '需要服务(城镇):', num: 28345, percent: '15.31%' },
        { typeTitle: '附近有(城镇):', num: 51736, percent: '27.95%' },
        { typeTitle: '接受过(城镇):', num: 7771, percent: '4.30%' },
        { typeTitle: '需要服务(农村):', num: 67749, percent: '19.47%' },
        { typeTitle: '附近有(农村):', num: 31708, percent: '9.11%' },
        { typeTitle: '接受过(农村):', num: 10983, percent: '3.16%' }
      ],
      list3: [ // （3）日间照料
        { typeTitle: '需要服务(合计):', num: 98376, percent: '18.45%' },
        { typeTitle: '附近有(合计):', num: 106219, percent: '19.93%' },
        { typeTitle: '接受过(合计):', num: 28858, percent: '5.41%' },
        { typeTitle: '需要服务(城镇):', num: 24221, percent: '13.08%' },
        { typeTitle: '附近有(城镇):', num: 48501, percent: '26.20%' },
        { typeTitle: '接受过(城镇):', num: 7095, percent: '3.83%' },
        { typeTitle: '需要服务(农村):', num: 74155, percent: '21.31%' },
        { typeTitle: '附近有(农村):', num: 57718, percent: '16.59%' },
        { typeTitle: '接受过(农村):', num: 21763, percent: '6.26%' }
      ],
      list4: [ // （4）文化娱乐
        { typeTitle: '需要服务(合计):', num: 170908, percent: '32.06%' },
        { typeTitle: '附近有(合计):', num: 172163, percent: '32.30%' },
        { typeTitle: '接受过(合计):', num: 97521, percent: '18.71%' },
        { typeTitle: '需要服务(城镇):', num: 56640, percent: '30.59%' },
        { typeTitle: '附近有(城镇):', num: 77526, percent: '41.88%' },
        { typeTitle: '接受过(城镇):', num: 36849, percent: '19.90%' },
        { typeTitle: '需要服务(农村):', num: 114268, percent: '32.84%' },
        { typeTitle: '附近有(农村):', num: 94637, percent: '27.20%' },
        { typeTitle: '接受过(农村):', num: 60672, percent: '17.44%' }
      ],
      list5: [ // （5）聊天解闷
        { typeTitle: '需要服务(合计):', num: 146255, percent: '27.44%' },
        { typeTitle: '附近有(合计):', num: 128006, percent: '24.01%' },
        { typeTitle: '接受过(合计):', num: 85024, percent: '15.95%' },
        { typeTitle: '需要服务(城镇):', num: 41655, percent: '22.50%' },
        { typeTitle: '附近有(城镇):', num: 54041, percent: '29.19%' },
        { typeTitle: '接受过(城镇):', num: 26690, percent: '14.42%' },
        { typeTitle: '需要服务(农村):', num: 104600, percent: '30.06%' },
        { typeTitle: '附近有(农村):', num: 73968, percent: '21.26%' },
        { typeTitle: '接受过(农村):', num: 58334, percent: '16.77%' }
      ],
      list6: [ // （6）老年辅具用品租赁服务
        { typeTitle: '需要服务(合计):', num: 70909, percent: '13.30%' },
        { typeTitle: '附近有(合计):', num: 51504, percent: '9.66%' },
        { typeTitle: '接受过(合计):', num: 12962, percent: '2.43%' },
        { typeTitle: '需要服务(城镇):', num: 17897, percent: '9.67%' },
        { typeTitle: '附近有(城镇):', num: 31143, percent: '16.82%' },
        { typeTitle: '接受过(城镇):', num: 4039, percent: '2.18%' },
        { typeTitle: '需要服务(农村):', num: 53012, percent: '15.24%' },
        { typeTitle: '附近有(农村):', num: 20316, percent: '5.85%' },
        { typeTitle: '接受过(农村):', num: 8923, percent: '2.56%' }
      ],
      list7: [ // （7）家庭病床
        { typeTitle: '需要服务(合计):', num: 66762, percent: '12.52%' },
        { typeTitle: '附近有(合计):', num: 47779, percent: '8.96%' },
        { typeTitle: '接受过(合计):', num: 12455, percent: '2.34%' },
        { typeTitle: '需要服务(城镇):', num: 15677, percent: '8.47%' },
        { typeTitle: '附近有(城镇):', num: 27721, percent: '14.97%' },
        { typeTitle: '接受过(城镇):', num: 3606, percent: '1.95%' },
        { typeTitle: '需要服务(农村):', num: 51085, percent: '14.68%' },
        { typeTitle: '附近有(农村):', num: 20058, percent: '5.76%' },
        { typeTitle: '接受过(农村):', num: 8849, percent: '2.54%' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getColor(i) {
      return this.colorList[i]
    }
  }
}
</script>

<style lang="scss" scoped>
.slideList{
  position: relative;
  z-index: 999;
  padding: 20px 20px 0 60px;
  .scroll-container {
    margin-left: 30%;
    width: 70%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }
  .titleList{
    width: 30%;
    position: absolute;
    left: 20px;
    top: 26px;
    .lie1{
      background-color: #fff;
      background: url('~@/assets/bigScreen/ylfwxmdxylyqk2.png') center no-repeat;
      background-size: cover;
      backdrop-filter: blur(10px);
      z-index: 9999;
      min-width: 201px;
      height: 66px;
      color: #fff;
      font-size: 24px;
      white-space: normal; /* 修改这里 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
  }
  .list{
    position: relative;
    display: flex;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0; /* 防止在垂直方向上被压缩 */
    background-size: cover;
    margin-bottom: 10px;
    .listItem{
      .item{
        display: flex;
        flex-direction: column;
        margin: 10px;
        .title{
          color: #C0C0C0;
          font-size: 16px;
        }
        .data{
          display: flex;
          font-size: 24px;
          div:nth-child(1){
            margin-right: 20px;
            color: #10EBD5;
          }
          div:nth-child(2){
            color: #5EBFE8;
          }
        }
      }
    }
  }
}
::-webkit-scrollbar-track {
  background: #006d75;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #3ec9d3;
  border-radius: 10px;
}
::-webkit-scrollbar {
  height: 6px;
}
</style>
